import React, { useState, useCallback, useMemo } from 'react'
import { Routes, Route, useNavigate, useLocation, Navigate } from 'react-router-dom'
import { Layout, Menu, Row, Col, Button, BackTop } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    ToTopOutlined,
    UserOutlined,
    ShopOutlined,
    HomeOutlined,
    CoffeeOutlined,
    PropertySafetyOutlined,
    PartitionOutlined,
    BarsOutlined,
    PlusOutlined,
} from '@ant-design/icons';

import Home from './manage/Home'
import Goods from './manage/Goods'
import GoodsList from './manage/goods/List'
import GoodsAdd from './manage/goods/Add'
import GoodsEdit from './manage/goods/Edit'
import UserList from './manage/user/List'
import UsersAdd from './manage/user/Add'
import UsersEdit from './manage/user/Edit'
import Category from './manage/Category'
import CategoryList from './manage/category/List'
import Order from './manage/Order'
import OrderList from './manage/order/List'
import OrdersAdd from './manage/order/Add'
import OrdersEdit from './manage/order/Edit'
import User from './manage/User'

import { withLogin } from '../utils/hoc';

import { connect } from 'react-redux'

const { Header, Sider, Content } = Layout;
const baseUrl = '/manage'

function Manage(props) {
    // const [selectPath,setSelectpath] = useState('/home')

    const { pathname } = useLocation();

    const Path = pathname.split('/');

    const openPath = '/' + Path.slice(2, 3).join('');

    console.log('openPath', openPath);

    const selectPath = '/' + Path.slice(2, Path.length).join('/');

    console.log(selectPath);

    const [collapsed, setCollapsed] = useState(false);
    const menu = useMemo(() => {
        return [
            {
                key: '/home',
                icon: <HomeOutlined />,
                label: '首页',
            },
            {
                key: '/goods',
                icon: <CoffeeOutlined />,
                label: '菜品管理',
                children: [
                    {
                        key: '/goods/list',
                        icon: <BarsOutlined />,
                        label: '菜品列表',
                    },
                    {
                        key: '/goods/add',
                        icon: <PlusOutlined />,
                        label: '添加菜品',
                    },
                ]
            },
            {
                key: '/category',
                icon: <PartitionOutlined />,
                label: '分类管理',
                children: [
                    {
                        key: '/category/list',
                        icon: <BarsOutlined />,
                        label: '分类列表',
                    }
                ]
            },
            {
                key: '/user',
                icon: <UserOutlined />,
                label: '用户管理',
                children: [
                    {
                        key: '/user/list',
                        icon: <BarsOutlined />,
                        label: '用户列表',
                    },
                ]
            },
            {
                key: '/order',
                icon: <PropertySafetyOutlined />,
                label: '订单管理',
                children: [
                    {
                        key: '/order/list',
                        icon: <BarsOutlined />,
                        label: '订单列表',
                    }
                    
                ]
            },
        ]
    }, [])
    const navigate = useNavigate()
    const changeMenu = useCallback(({ item, key, keyPath, domEvent }) => {
        console.log('changeMenu', key, keyPath)
        // key: /list
        // keyPath: ['/list','/goods']
        // 目标path: /manage/goods/list

        // setSelectpath(key);
        const path = baseUrl + key;
        navigate(path)
    }, [selectPath])


    const logout = useCallback(function () {
        // props.dispatch({type:'logout'})
        props.logout()
        navigate('/login')
    }, [])

    console.log(collapsed);

    console.log(selectPath);


    return (
        <Layout className='manage'>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                {
                    collapsed ? <div className="logo"><ShopOutlined style={{ fontSize: '30px' }} /></div> : <div className="logo">趣学面馆后台管理系统</div>
                }

                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['/home']}
                    selectedKeys={[selectPath]}
                    defaultOpenKeys={[openPath]}
                    items={menu}
                    onClick={changeMenu}

                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                    }}
                >
                    <Row gutter={16} style={{ marginRight: 0 }}>
                        <Col span={6}>
                            {
                                React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                                    className: 'trigger',
                                    onClick: () => setCollapsed(!collapsed),
                                })
                            }
                        </Col>
                        <Col span={18} className='text-right'>
                            <span>{props.user?.username}</span> <Button type="link" onClick={logout}>退出</Button>
                        </Col>
                    </Row>

                </Header>
                <Content
                    className="content"
                >
                    <Routes>
                        <Route path='home' element={<Home />} />
                        <Route path='goods' element={<Goods />}>
                            <Route path='list' element={<GoodsList />} />
                            <Route path='add' element={<GoodsAdd />} />
                            <Route path=':id' element={<GoodsEdit />} />
                        </Route>
                        <Route path='category' element={<Category />} >
                            <Route path='list' element={<CategoryList />} />
                        </Route>
                        <Route path='user' element={<User />} >
                            <Route path='list' element={<UserList />} />
                            <Route path='add' element={<UsersAdd />} />
                            <Route path=':id' element={<UsersEdit />} />
                        </Route>
                        <Route path='order' element={<Order />} >
                            <Route path='list' element={<OrderList />} />
                            <Route path='add' element={<OrdersAdd />} />
                            <Route path=':id' element={<OrdersEdit />} />
                        </Route>
                        <Route path='/' element={<Navigate to='/manage/home' />} />
                    </Routes>
                    <BackTop
                        target={() => {
                            return document.getElementsByClassName('content')[0]
                        }}
                        visibilityHeight={300}
                        style={{ fontSize: '30px', right: '10px' }}
                    >
                        <ToTopOutlined />
                    </BackTop>
                </Content>
            </Layout>
        </Layout>
    );
}

Manage = withLogin(Manage)

// 映射Redux状态到组件的props
const mapStateToProps = function (state) {
    return {
        user: state.userInfo
    }
}

// 把修改redux的方法映射到props
const mapDispatchToProps = function (dispatch) {
    return {
        logout() {
            dispatch({ type: 'logout' })
        }
    }
}
Manage = connect(mapStateToProps, mapDispatchToProps)(Manage)
export default Manage;